var that ;
class Tab {
constructor(id) {
    that = this;
this.main = document.querySelector(id);
this.ul = this.main.querySelector('ul')
this.lis = this.main.querySelectorAll('li');
this.add = this.main.querySelector('.tabadd')
this.sections = this.main.querySelectorAll('section');
this.tavscon = this.main.querySelector('.tavscon')
this.removs = this.main.querySelectorAll('.icon-guanbi')
this.init()
}
init(){
    this.updateNode();
    this.add.onclick = this.addTab;
    for(var i=0;i<this.lis.length;i++){
        this.lis[i].index = i;
        this.lis[i].onclick = this.toggleTab;
        this.removs[i].onclick = this.remove;
        this.spans[i].ondblclick = this.editTab;
    }
}
toggleTab(){
    that.clearClass();
    this.className = 'liactive'
   that.sections[this.index].className = 'conactive'
}
updateNode(){
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.removs = this.main.querySelectorAll('.icon-guanbi')
    this.spans = this.main.querySelectorAll('.box nav li span:first-child')
}
clearClass(){
   for(var i=0;i<this.lis.length;i++){
       this.lis[i].className = ''
       this.sections[i].className = ''
       
   }
}
addTab(){
    var ram = Math.random()
    console.log(that.ul);
    console.log(that.tavscon);
   
    that.clearClass()
    var section = ' <section class="conactive" >测试3'+ram+'</section>'
    var li = '<li class="liactive"><span>测试3</span><span class="iconfont icon-guanbi"></span></li>'
   that.ul.insertAdjacentHTML('beforeend',li)
   that.tavscon.insertAdjacentHTML('beforeend',section)
   that.init()
}
remove(e){
    e.stopPropagation();
    var index = this.parentElement.index;
this.parentElement.remove()
that.sections[index].remove()
that.init()
if(document.querySelector('.liactive')) return;
index--;
       that.lis[index]&&that.lis[index].click();
}
editTab (){
    var str = this.innerHTML
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// alert(11)
this.innerHTML = '<input type="text" />'
var input = this.children[0];
input.value = str;
// 让文字处于选定状态
input.select()
input.onblur = function(){
    this.parentElement.innerHTML = this.value;
}
input.onkeyup = function(e){
if(e.keyCode===13){
    this.blur();
}
}
}
}
new Tab("#tab")